<template>
  <view id="main">
    <yz-bg themeBg> </yz-bg>
    <!-- 顶部搜索框 -->
    <yz-topBar height="40">
      <template #center>
        <view class="search-box flex">
          <uni-icons @tap="search" type="search" color="#fff" size="24" />
          <input
            v-model="CheckStore.searchParam"
            placeholder="请输入关键词搜索"
            placeholder-style="color:##ffffffbf,font-size:14px"
            @confirm="search"
          />
        </view>
      </template>
      <template #right> <yz-exitlogin /> </template>
    </yz-topBar>
    <view @tap="handleScanCode" class="handle_card flex">
      <view class="card scan_code flex">
        <view class="scan_icon">
          <image class="medium_Icon" src="@/static/icon/scan-ticket.png" />
        </view>
        <view class="info">
          <view class="title fs_18 color_black">扫码查询</view>
          <view class="text fs_14 color_gray">扫码定位伤员</view>
        </view>
      </view>
    </view>
    <!-- info -->
    <view class="content">
      <!-- tab -->
      <view class="tab_top flex">
        <yz-tab
          :scrollable="true"
          lineColor="#00ABBA"
          :activeStyle="{
            fontWeight: 'bold',
            transform: 'scale(1.1)',
            color: '#00ABBA',
          }"
          lineWidth="40rpx"
          @click-tab="changeTab"
          v-model="current"
          :data="CheckStore.checkTypeDict.checkList"
        ></yz-tab>
        <view @tap="openPopupStatus" class="check_status flex">
          <view class="fs_16 color_black">
            {{ CheckStore.CheckStatusName }}
          </view>
          <uni-icons type="down" color="#08121E" size="14" />
        </view>
        <uni-popup @maskClick="closePopup" ref="popup" type="bottom">
          <view class="popup_content">
            <uni-icons type="closeempty" color="#8D8F9B" size="18" />
            <view class="title">
              <view class="title_text flex">
                <view class="fs_16 color_black"> 筛选 </view>
              </view>
            </view>
            <view class="popup_item">
              <view class="item_title fs_14 color_black">检查状态</view>
              <view class="item_content flex">
                <view
                  @tap="handleCheckStatus(item)"
                  v-for="(item, index) in CheckStore.checkStatusList.list"
                  :key="index"
                  :class="[item.value == StatusCode ? 'active' : '']"
                  class="item fs_14 color_black"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
            <view class="confirm flex">
              <view @tap="handleConfirm" class="button"> 确定 </view>
            </view>
          </view>
        </uni-popup>
      </view>
      <scroll-view @scrolltolower="scrolltolower" class="scroll" scroll-y>
        <view
          v-for="(item, index) in CheckStore.checkPageList.List"
          :key="item.TagUuid"
          class="card list_item"
          @tap="toHandleCheck(item.TestUuid, item.TagCode)"
        >
          <view :class="[item.CheckStatus]" class="tag top_tag fs_12">
            {{ item.CheckStatusName }}
          </view>
          <view class="card_content">
            <view class="handle_box flex">
              <view class="code fs_18 color_black text_overflow">
                {{ item.TagCode }}
              </view>
              <view class="right_box flex">
                <!-- <view class="tag">
                  {{ item.TestTypeName || '--' }}
                </view> -->
                <uni-icons type="right" color="#8D8F9B" size="22" />
              </view>
            </view>
            <view class="info_box flex fs_12 color_gray">
              <view v-if="item.TestTypeName" class="item time flex">
                <view class="label">检测类型：</view>
                <view>{{ item.TestTypeName }}</view>
              </view>
              <view v-if="item.AddTime" class="item whereabouts flex">
                <view class="label"> 下单时间：</view>
                <view> {{ item.AddTime || '--' }} </view>
              </view>
              <view v-if="item.Doctor" class="item whereabouts flex">
                <view class="label"> 报告医生：</view>
                <view> {{ item.Doctor || '--' }} </view>
              </view>
            </view>
          </view>
        </view>
        <view style="text-align: center" v-if="CheckStore.islower"> ... 加载中 ... </view>
      </scroll-view>
    </view>
  </view>
  <yz-tips v-if="toast.show" :title="toast.title"> </yz-tips>
</template>

<script lang="ts" setup>
import { useToastStore } from '@/stores/modules/toast'
const toast = useToastStore()
import { useCheckfzStore } from '@/stores/modules/checkfz'
import { useHandleCheckStore } from '@/stores/modules/handleCheck'
const handleCheckStore = useHandleCheckStore()
import { onShow } from '@dcloudio/uni-app'
const CheckStore = useCheckfzStore()
onShow(async () => {
  CheckStore.clearDate('all')
  await CheckStore.getcheckList()
  if (!CheckStore.checkTypeDict.checkList.length) {
    await CheckStore.getCheckTypeDict()
  }
})
//滚动加载
const scrolltolower = async () => {
  await CheckStore.getcheckList()
}
const searchValue = ref('') // 搜索框输入值
// tab切换
const current = ref('') // 当前tab索引
const changeTab = async (e: any) => {
  CheckStore.clearDate('TestType')
  CheckStore.TestType = e.value
  await CheckStore.getcheckList()
}
//状态筛选
const popup: any = ref(null)
const StatusCode = ref('')
const CheckStatusName = ref('')
const openPopupStatus = () => {
  popup.value.open()
}
//选中时
const handleCheckStatus = (item: any) => {
  StatusCode.value = item.value
  CheckStatusName.value = item.name
}
// 确定筛选
const handleConfirm = async () => {
  CheckStore.CheckStatus = StatusCode.value
  CheckStore.CheckStatusName = CheckStatusName.value
  CheckStore.clearDate('search')
  popup.value.close()
  await CheckStore.getcheckList()
}
// 关闭筛选
const closePopup = () => {
  StatusCode.value == CheckStore.CheckStatus ? '' : (StatusCode.value = CheckStore.CheckStatus)
  popup.value.close()
}
// 搜索
const search = async () => {
  CheckStore.clearDate('search')
  await CheckStore.getcheckList()
}
// 扫码定位伤员
const handleScanCode = async () => {
  uni.scanCode({
    success: async (res) => {
      const result = res.result
      console.log(result)
      CheckStore.searchParam = result
      CheckStore.clearDate('search')
      await CheckStore.getcheckList()
    },
  })
}
// 跳转到处理伤员页面
const toHandleCheck = (TestUuid: string, TagCode: string) => {
  handleCheckStore.clearCheckData()
  uni.navigateTo({
    url: `/pages/index/handlewounded/handlewounded?TestUuid=${TestUuid}&TagCode=${TagCode}`,
  })
}
</script>

<style lang="scss" scoped>
#main {
  .search-box {
    margin-left: 24px;
    width: 280px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.2);
    padding-left: 10px;
    ::v-deep {
      .uni-input-placeholder {
        color: #ffffffbf;
      }
    }
    input {
      width: 95%;
    }
  }
  ::v-deep.butIcon {
    margin-right: 12px;
  }
  .handle_card {
    margin: 20px 0;
    justify-content: space-between;
    padding: 0 12px;
    .card {
      padding: 20px 12px;
      width: 100%;
    }
    .scan_icon {
      margin-right: 8px;
      width: 36px;
      height: 36px;
      background: linear-gradient(90deg, rgb(15, 188, 204), rgb(11, 187, 203) 100%);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .info {
      display: flex;
      flex-direction: column;
    }
  }
  .content {
    padding: 0 12px;
    height: 390px;
    .tab_top {
      justify-content: space-between;
      ::v-deep .zb-tabs__nav_inner {
        background-color: transparent;
      }
      ::v-deep .zb-tabs__nav {
        width: 80%;
      }
    }
    .popup_content {
      width: 100%;
      padding: 20px 0;
      height: 240px;
      border-radius: 11px 11px 0px 0px;
      background: rgb(247, 249, 252);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .uni-icons {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .title {
        width: 100%;
        position: absolute;
        top: 20px;
        .title_text {
          flex-direction: column;
        }
      }
      .popup_item {
        width: 100%;
        padding: 0 20px;
        .item_content {
          margin-top: 10px;
          .item {
            width: 30%;
            text-align: center;
            padding: 10px;
            margin: 0 10px;
            border-radius: 6px;
            /* 内容 */
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
            /* bg/纯白 */
            background: rgb(255, 255, 255);
            &.active {
              border: 1px solid rgb(3, 191, 198);
              border-radius: 6px;
              /* 内容 */
              box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
              background: rgb(242, 251, 251);
            }
          }
        }
      }
      .confirm {
        padding: 10px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.08);
        background: rgb(255, 255, 255);
        justify-content: center;
        .button {
          width: 60%;
          height: 40px;
          line-height: 40px;
          justify-content: center;
        }
      }
    }
    .scroll {
      height: calc(100% - 40px);
      .list_item {
        margin: 10px 0;
        padding: 24px 12px 12px;
        position: relative;
        .tag {
          color: rgb(0, 190, 197);
          background: rgb(229, 248, 248);
          border-radius: 4px;
          padding: 4px 8px;
          font-size: 10px;
          &.top_tag {
            border-radius: 0px 0px 4px 4px;
            position: absolute;
            font-size: 12px;
            top: 0;
            left: 12px;
          }
          &.CheckStatus1 {
            color: rgb(0, 190, 197);
            background: rgb(229, 248, 248);
          }
          &.CheckStatus2 {
            color: rgb(16, 100, 251);
            background: rgb(221, 233, 255);
          }
        }

        .card_content {
          .handle_box,
          .info_box {
            margin-top: 10px;
            justify-content: space-between;
          }
          .handle_box {
            .text_overflow {
              max-width: 70%;
            }
          }
          .info_box {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px;
            border-radius: 6px;
            background: rgb(247, 248, 250);
            .label {
              color: #bcbfc8;
            }
            .item {
              margin: 4px 0;
            }
          }
        }
      }
    }
  }
}
</style>
